<template>
	<view class="bg-user rounded-lg p-20">
		<view class="flex items-start" v-if="edit">
			<view class="flex flex-col items-center relative">
				<view @click="onPath('/pages/user/anchorinfo')" class="w-120 h-120 rounded-lg overflow-hidden">
					<ImageBoxVue :src="val.headimg"></ImageBoxVue>
				</view>
				<view v-if="val.vioArr?.length > 0" @click="playAudio(val.vioArr)"
					class="absolute -bottom-20 flex items-center justify-center bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] rounded-full w-88 h-44">
					<view class="icon-voice" v-if="playing"></view>
					<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="28rpx" v-else></ImageBoxVue>
					<text class="text-white ml-4">{{val.vioArr[1]}}''</text>
				</view>
			</view>
			<view class="flex-1 pl-20 flex flex-col justify-center" :class="[val.vioArr?.length > 0?'mt-20':'']">
				<view class="flex justify-between mb-10">
					<view class="flex items-center">
						<view class="w-100 overflow-hidden ellipsis">
							<text class="text-md ellipsis">{{val.name}}</text>
						</view>
						<view class="mx-10">
							<view class="flex justify-center items-center" v-if="val.member?.gender==0">
								<view class="rounded-full w-48 h-36 bg-[#FD6CFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/w_man.png" width="24rpx" height="24rpx">
									</ImageBoxVue>
								</view>
							</view>
							<view class="flex justify-center items-center" v-if="val.member?.gender==1">
								<view class="rounded-full w-48 h-36 bg-[#329EFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/man.png" width="24rpx" height="24rpx"></ImageBoxVue>
								</view>
							</view>
						</view>
						<view class="bg-[#65A3FF] px-12 h-36 flex items-center rounded-full">
							<text class="text-white">{{jobQuery(val)}}</text>
						</view>
						<view class="" v-if="edit">
							<ImageBoxVue @click="onPath('/pages/user/anchorinfo')" src="/static/icons/edit.png" class="ml-10"
								width="32rpx" height="33rpx">
							</ImageBoxVue>
						</view>
					</view>
				</view>
				<text>{{val.troduction||'这家伙什么都没留下'}}</text>
			</view>
			<view class="flex flex-col ml-20">
				<view class="follow flex-center mb-20" @click="onPath('/pages/user/attention')">
					<text class="text-[#333333] font-bold">{{val.folw}}</text>
					<text class="text-[#666666] text-xs ml-10">关注</text>
				</view>
				<view class="vermicelli flex-center" @click="onPath('/pages/user/fans')">
					<text class="text-[#333333] font-bold">{{val.fas}}</text>
					<text class="text-[#666666] text-xs ml-10">粉丝</text>
				</view>
			</view>
		</view>
		<view class="flex" v-else>
			<view class="flex flex-col items-center relative">
				<view @click="onPath('/pages/user/anchorinfo')" class="w-120 h-120 rounded-lg overflow-hidden">
					<ImageBoxVue :src="val.headimg"></ImageBoxVue>
				</view>
			</view>
			<view class="flex-1 pl-20 flex flex-col justify-center">
				<view class="flex justify-between mb-10">
					<view class="flex items-center">
						<view class="w-100 overflow-hidden ellipsis">
							<text class="text-md ellipsis">{{val.name}}</text>
						</view>
						<view class="mx-10">
							<view class="flex justify-center items-center" v-if="val.member?.gender==0">
								<view class="rounded-full w-48 h-36 bg-[#FD6CFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/w_man.png" width="24rpx" height="24rpx">
									</ImageBoxVue>
								</view>
							</view>
							<view class="flex justify-center items-center" v-if="val.member?.gender==1">
								<view class="rounded-full w-48 h-36 bg-[#329EFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/man.png" width="24rpx" height="24rpx"></ImageBoxVue>
								</view>
							</view>
						</view>
						<view class="bg-[#65A3FF] px-12 h-36 flex items-center rounded-full">
							<text class="text-white">{{jobQuery(val)}}</text>
						</view>
					</view>
					<view class="" @click="handleCollect">
						<ImageBoxVue src="/static/user/heart.png" width="40rpx" height="35rpx" v-if="isCollect == -1"></ImageBoxVue>
						<ImageBoxVue src="/static/user/red_heart.png" width="40rpx" height="35rpx" v-else></ImageBoxVue>
					</view>
				</view>
				<view class="flex mt-10">
					<view class="follow flex-center mr-20" @click="onPath('/pages/user/attention')">
						<text class="text-[#7290A6] text-xs">关注</text>
						<text class="text-[#333333] font-bold ml-10 text-md">{{val.folw}}</text>
					</view>
					<view class="vermicelli flex-center" @click="onPath('/pages/user/fans')">
						<text class="text-[#7290A6] text-xs">粉丝</text>
						<text class="text-[#333333] font-bold ml-10 text-md">{{val.fas}}</text>
					</view>
				</view>
				<!-- <text>{{val.troduction||'这家伙什么都没留下'}}</text> -->
			</view>
		</view>
		<!-- 标签 -->
		<view class="flex mt-20 justify-between" v-if="val.tiplist?.length > 0">
			<view class="">
				<view class="flex-1 p-12 rounded mr-10" v-for="(e,i) in val.tiplist" :key="i" :style="{background:e.backcolor}">
					<text class="" :style="{color:e.fontcolor}">{{e.name}}</text>
				</view>
			</view>
		</view>
		<view class="mt-20" v-if="!edit">
			<view class="bg-[#F3FAFF] flex items-start p-20 line">
				<view class="text-[#333333] font-bold">主播介绍:</view>
				<view class="flex-1 text-[#666666] ml-6">{{val.troduction||'这家伙什么都没留下'}}</view>
			</view>
			<view class="bg-[#F3FAFF] flex items-center p-20 line" v-if="val.vioArr?.length > 0">
				<view class="text-[#333333] font-bold">语音介绍:</view>
				<view class="flex-1 text-[#666666] ml-6">
					<view class="rounded-full bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] flex justify-center p-20"
						@click="playAudio(val.vioArr)">
						<view class="icon-voice" v-if="playing"></view>
						<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="30rpx" v-else></ImageBoxVue>
						<text class="text-white ml-10 font-lg font-bold">{{val.vioArr[1]}}''</text>
					</view>
				</view>
			</view>
			<view class="bg-[#F3FAFF] flex items-start p-20">
				<view class="text-[#333333] font-bold">想对您说:</view>
				<view class="flex-1 text-[#666666] ml-6">{{val.wantsay||'这家伙什么都没留下'}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue'
	import {
		jobQuery
	} from '@/config/publicFun';

	const {
		val,
		edit,
		isCollect,
	} = defineProps(['val', 'edit', 'isCollect'])
	const emit = defineEmits(['collect'])

	const playing = ref(false)
	const audioCtx = ref()
	const colors = [{
		bg: "#E3EDFF",
		text: "#4370C1"
	}, {
		bg: "#F2ECFF",
		text: "#634A97"
	}, {
		bg: "#FFE7D6",
		text: "#C3743B"
	}]
	const cardList = [{
		key: "popnum",
		label: "关注",
		router: "/pages/user/attention"
	}, {
		key: "bepopnum",
		label: "粉丝",
		router: "/pages/user/fans"
	}]

	const handleCollect = () => {
		emit('collect')
	}

	const playAudio = (val) => {
		if (!val.length) {
			return
		}
		if (playing.value) {
			audioCtx.value.stop();
			playing.value = false
			audioCtx.value = null
		} else {
			playing.value = true
			audioCtx.value = uni.createInnerAudioContext();
			audioCtx.value.src = val[0]; // 在线音频地址
			audioCtx.value.play();
			audioCtx.value.onEnded(() => {
				playing.value = false
			})
		}
	}

	const onPath = (router) => {
		if (router == '/pages/user/anchorinfo' || router == '/pages/user/attention' || router == '/pages/user/fans') {
			if (edit) {
				uni.navigateTo({
					url: router,
				});
			}
		} else {
			uni.navigateTo({
				url: router,
			});
		}
	}
</script>

<style lang="scss" scoped>
	.bg-user {
		background: linear-gradient(180deg, #D0EEFF -36.07%, #FFFFFF 29.3%);
	}

	.line {
		border-bottom: 4rpx solid #fff;
	}

	.bg-voice {
		// background: linear-gradient(15.22deg, #34D3DD 7.8%, #94F2FF 86.42%);
		// background: #ffd7aa;
		background: #34D3DD;
		// color: #7e512c;
		color: #fff;
	}

	.icon-voice {
		animation-name: example;
		/* 引用上面定义的@keyframes */
		animation-duration: 3s;
		/* 动画持续时间 */
		animation-iteration-count: infinite;
		/* 无限循环 */
		background: url(/static/user/icon_voice1.png) no-repeat;
		background-size: contain;
		width: 28rpx;
		height: 30rpx;
	}

	@keyframes example {
		0% {
			background: url(/static/user/icon_voice1.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		50% {
			background: url(/static/user/icon_voice2.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		100% {
			background: url(/static/user/icon_voice3.png) no-repeat;
			background-size: cover;
			width: 28rpx;
			height: 30rpx;
		}
	}
</style>